<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <van-nav-bar class="page-nav-bar" fixed>
      <van-button class="search-btn"
                  slot="title"
                  type="info"
                  size="small"
                  round
                  icon="search"
                  to="/search">搜索</van-button>
      <template #right>
        <van-icon name="chat-o" size="25" color="#fff" @click="$router.push('/qa')" />
      </template>
      <template #left>
        <van-image round
                   width="35"
                   height="35"
                   :src="Img"
                   @click="$router.push('/my')" />
      </template>
    </van-nav-bar>
    <!-- /导航栏 -->
    <van-tabs class="channel-tabs" v-model="active">
      <van-tab :title="channel.name" v-for="(channel,index) in channels" :key="index">
        <article-list :channel="channel"></article-list>
      </van-tab>
      <div slot="nav-right" class="tuozhan" @click="show=true"><van-icon name="bars" /></div>
    </van-tabs>
    <van-popup v-model="show"
               closeable
               position="top"
               :style="{ height: '50%' }"
               round>
      <channel-edit :user-channels="channels "></channel-edit>
    </van-popup>
  </div>
</template>

<script>
import ArticleList from '@/components/article-list'
import { mapState } from 'vuex'
import ChannelEdit from './components/channel-edit'

export default {
  name: 'HomeIndex',
  components: {
    ArticleList,
    ChannelEdit
  },
  data () {
    return {
      value: '',
      isResultShow: false, // 控制搜索结果的展示
      active: 1,
      channels: [],
      Img: '',
      show: false
    }
  },
  computed: {
    ...mapState(['usechannellists', 'user'])
  },
  created () {
    this.channels = this.usechannellists
    var p = ''
    p = this.user ? this.$store.state.userInfo.photo : 't0.jpg'
    this.Img = require('@/assets/touxiang/' + p)
  },
  methods: {
    onSearch (val) {
      this.value = val
      this.isResultShow = true
    }
  }
}
</script>

<style scoped lang="less">
  .home-container {
    .van-nav-bar
  {
    background-color: #d75f95;
  }
    .van-nav-bar__title

  {
    max-width: unset;
  }

  .search-btn {
    width: 400px;
    height: 64px;
    background-color: #fff;
    border: none;
    font-size: 28px;
    color:#111;
    .van-icon

  {
    font-size: 32px;
  }

  }
  /deep/ .channel-tabs {
    .van-tabs__wrap

  {
    position: fixed;
    top: 92px;
    z-index: 1;
    left: 0;
    right: 0;
    height: 82px;
  }

  .van-tab {
    border-right: 1px solid #edeff3;
    min-width: 100px;
    font-size: 25px;
    color: #777777;
  }

  .van-tab--active {
    color: #333333;
    font-size:32px;
    padding:0;
  }

  .van-tabs__nav {
    padding-bottom: 0;
  }

  .van-tabs__line {
    bottom: 8px;
    width: 61px !important;
    height: 6px;
    background-color: #d75f95;
  }
  }
  .placeholder {
    flex-shrink: 0;
    width: 66px;
    height: 82px;
  }

  .hamburger-btn {
    position: fixed;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 66px;
    height: 82px;
    background-color: #fff;
    opacity: 0.902;
    i .toutiao

  {
    font-size: 33px;
  }

  &:before {
    content: "";
    position: absolute;
    left: 0;
    width: 2px;
    height: 100%;
    background-image: url(~@/assets/gradient-gray-line.png);
    background-size: contain;
  }
  }
  }
  .van-nav-bar {
    border-bottom: 1px solid #808080;
  }
  .tuozhan{
      margin:13px 20px 0 0;
      font-size:50px;
  }
</style>
